<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div th:include="sys/header :: copy"></div>
<head>
    <title>管理员列表</title>
</head>
<body>
<div id="rrapp" v-cloak>
<el-row>
    <el-col :xs="24">
        <el-card header="查询条件">
            <el-form label-width="100px">
                <el-form-item label="单行标题">
                    <el-button round :autofocus="true" size="small" v-if="true">确定</el-button>
                    <el-button round size="small">确定</el-button>
                </el-form-item>
                <el-form-item label="标题">
                    <el-date-picker v-model="datePicker" :editable="true" :clearable="true" type="datetime" format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="标题">
                    <el-button size="medium" :autofocus="true" icon="el-icon-zoom-in">确定</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-col>
    <el-col :xs="24">
        <el-card>
            <el-table :data="tableList" stripe fit="false" show-header="false" highlight-current-row>
                <el-table-column prop="id" label="列1">
                </el-table-column>
                <el-table-column prop="name" label="列2">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200px">
                    <template slot-scope="scope">
                        <el-button mc-type="column-el-button" size="mini" type="primary">编辑</el-button>
                        <el-button mc-type="column-el-button" size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-left: -5px;"current-change="currentChange" layout="prev,pager,next" :total="pageTotal" :current-page.sync="currentPage" :page-size="20" :pager-count="11" :hide-on-single-page="false" background>
            </el-pagination>
        </el-card>
    </el-col>
</el-row>
</div>
<script>
    var vm = new Vue({
        el: '#rrapp',
        data: {
            datePicker:null,
            tableList:{},
            pageTotal:10,
            currentPage:1

        },
        methods: {
            currentChange:function(page){
                console.log(page);
            },
        },
        mounted:{
            getInfo:function () {
                Ajax.request({
                    url: "../sys/user/list" ,
                    async: true,
                    successCallback: function (r) {
                        vm.tableList = r.data.record;
                        //获取角色信息
                    }
                });
            }
        }

    })


</script>
</body>
</html>